<template>
  <div>
    <!--  图标区域 -->
    <div class="flex"> 
         <el-tooltip  content="锁屏开关,可防误输入" ><el-switch v-model="isSafe" size="small" /></el-tooltip>
         <el-tooltip  content="新开一个页面" > <el-icon :size="20" color="#CCC" @click="add()"> <Plus /> </el-icon></el-tooltip>
         <el-tooltip  content="删除当前页面" > <el-icon :size="20" color="red" @click="Delete()"> <Delete /> </el-icon></el-tooltip>
         <el-tooltip  content="保存所有记录" > <el-icon :size="20" @click="postDocs()"><Position /></el-icon></el-tooltip>
    </div>
    <!--  左侧区域 -->
    <div class="docs">
      <el-icon :size="20" @click="change(i)" v-for="(e, i) in list" :key="i"
        ><Document
      /></el-icon>
    </div>

    <!--  右侧区域 -->
    <div class="words">
      <el-input
        @click="copy(item)"
        v-for="(item, i) in cur.words"
        :key="i"
        v-model="cur.words[i]"
        :autosize="{ minRows: 2, maxRows: 4 }"
        type="textarea"
      />
    </div>
  </div>
</template>
<script>
import service from "../../common/api.js";
var res;

console.log(service);
export default {
  data() {
    return {
      isSafe:true,
      list: [],
      cur: [],
      index: 0,
    };
  },
  created() {
    Object.assign(this, { service }); // 一般很少这样操作
    this.getDocs();
  },
  methods: {
    add() {
      this.list.push({ id: Date.now(), words: Array(20).fill("") });
    },
    change(i) {
      this.index = i;
      this.cur = this.list[i];
    },
    delete() {
      this.list.splice(this.index, 1);
      this.cur = this.list[0] || {};
      this.index  = 0
    },
    async getDocs() {
      res = await this.service.getDocs({});
      this.list = res.data;
      this.cur = this.list[0] || {} 
    },
    async postDocs() {
      res = await this.service.postDocs({ docs: this.list });
    },
    copy(item) {
      if(!this.isSafe) return
      var inp = document.createElement("input");
      document.body.appendChild(inp); 
      inp.value = item;
      inp.select(); 
      document.execCommand("copy", false); 
      inp.remove();
    },
  },
   beforeRouteLeave(){
     service.post("/doc/api/save",{ docs:this.list }) 
  },
};
</script>
<style scoped>
.flex {
  display: flex;
  align-items: center;
}
.between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.words {
  height: calc(100vh - 100px);
  overflow: auto;
}
::-webkit-scrollbar {
  display: none;
}
.el-card__header {
  padding: 2px 10px;
}
.el-card__body {
  padding: 5px 10px;
}
.el-input-group,
.el-input-group .el-input__inner {
  height: 50px;
}
</style>
